<template>
    <div>
        <div class="sidebar-menu">
            <ul class="nav-menu">
                <li class="parent-menu"
                    v-on:mouseenter.self="toggle_list_in($event)"
                    v-on:mouseleave.self="toggle_list_out($event)">
                    <a href="JavaScript:void(0);">
                        <span class="menu-text"
                              @click="toWorkPlace()"
                              v-on:mouseenter.self="toggle_list_color_in($event)"
                              v-on:mouseleave.self="toggle_list_color_out($event)">
                            <i class="fa fa-home fa-2x" aria-hidden="true"></i>
                        </span>
                    </a>
                </li>
                <li class="parent-menu"
                    v-for="(parent_menu,parentIndex) in $nav_.navList"
                    v-on:mouseenter.self="toggle_list_in($event)"
                    v-on:mouseleave.self="toggle_list_out($event)"
                    v-if="parent_menu.show"
                    v-bind:key="parent_menu.id">
                    <a href="JavaScript:void(0);">
                        <span class="menu-text"
                              v-on:mouseenter.self="toggle_list_color_in($event)"
                              v-on:mouseleave.self="toggle_list_color_out($event)">{{parent_menu.name}}</span>
                    </a>
                    <ul class="submenu hidden submenu-height">
                        <li v-for="(submenu,chindIndex) in parent_menu.children"
                            v-if="submenu.show"
                            v-bind:key="submenu.id">
                            <a href="JavaScript:void(0);"
                               v-on:mouseenter.self="toggle_list_color_in($event)"
                               v-on:mouseleave.self="toggle_list_color_out($event)"
                               v-bind:key="submenu.id" v-bind:id="submenu.href.substring(1,submenu.href.length)" class="tab-tag"
                               @click="routerChange(parentIndex,chindIndex)">
                                <span>{{submenu.name}}</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <v-navTab></v-navTab>
    </div>
</template>

<script>
    import navTab from 'components/navTab/navTab'
    export default {
        name: 'navs',
        data() {
            return {
                from_url:false,
            }
        },
        beforeCreate:function(){
        },
        methods: {
            toWorkPlace: function(){
                this.$router.push("/workPlace/yearMonthDay?index=0");// 让其代码自动路由
                this.$nav_.routerChangeTab(this,0)
            },
            // 显示与隐藏menu
            toggle_list_in: function (event) {
                $(event.currentTarget).addClass('toggle_list_in');
                $(event.currentTarget).find("ul").removeClass('hidden');
            },
            toggle_list_out: function (event) {
                $(event.currentTarget).removeClass('toggle_list_in');
                $(event.currentTarget).find("ul").addClass('hidden');
            },
            toggle_list_color_in: function (event) {
                $(event.currentTarget).addClass('toggle_list_color');
            },
            toggle_list_color_out: function (event) {
                $(event.currentTarget).removeClass('toggle_list_color');
            },
            routerChange:function (parentIndex,chindIndex) {
                return this.$nav_.routerChange(this,parentIndex,chindIndex);
            }
        },
        components: {
            'v-navTab': navTab
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    /*1px像素边框*/
    .top_nav {
        color: #ffffff;
    }
    div ul {
        list-style: none; /* 去掉ul前面的符号 */
        margin: 0px; /* 与外界元素的距离为0 */
        padding: 0px; /* 与内部元素的距离为0 */
    }
    div ul li {
        float: left; /* 向左漂移，将竖排变为横排 */
    }
    div ul li a, div ul li a:visited {
        color: #333333; /* 文字颜色 */
        display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */
        line-height: 1.35em; /* 行高 */
        text-align: center;
        text-decoration: none; /* 不显示超链接下划线 */
        white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
    }
    .border-left{
        border-left:1px solid #dddddd22;
    }
    .site-doc-color li {
        display: inline-block;
        vertical-align: middle;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        line-height: 22px;
    }
    .sidebar-menu {
        width: 100%;
        height: 46px!important;
        background: url(menu-bg.jpg) repeat-x center center;
        z-index: 899;
        width: 100%;
        position: absolute;
    }
    .nav-menu > li {
        padding-bottom: 0;
        min-height: 100%;
        font-family: 'Open Sans';
        font-size: 13px;
        color: #393939;
        line-height: 1.5;
    }
    .toggle_list_in {
        background-color: #e4e6e9;
    }
    .toggle_list_color {
        color: #f85506;
    }
    .diaplay {
        display: block;
    }
    .hidden {
        display: none;
    }
    .parent-menu {
        width: 100px;
        height: 46px;
        overflow: visible;
        z-index: 99999;
        line-height: 46px;
        text-align: center;
        /*box-shadow: 4px 4px 2px #cccccc;*/
    }
    .menu-text {
        width: 100px;
        height: 46px;
        overflow: visible;
        line-height: 46px;
        text-align: center;
        display: block;
    }
    .menu-text i{
        color: #f85506;
        line-height: 46px;
    }
    .submenu {
        background-color: #333333;
    }
    .tab-tag {
        width: 100px;
        height: 46px;
        overflow: visible;
        line-height: 46px;
        text-align: center;
        background-color: #f2f2f2;
        box-shadow: 3px 3px 10px #cccccc;
    }
</style>
